<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blog details</title>
    <!--google fonts-->
    <!--<link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">-->

    <!--font-awesome CDN-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Index.css">

</head>
<body class="has-main-header has-main-nav has-admin-aside has-admin-footer">

<main role="main">

    <section class="margin-footer">
        <div class="container">
            <div class="row">
                <aside class="col-sm-3">
                    <nav class="navbar aside-collapse-navbar">
                        <div class="">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle collapsed btn-clean" data-toggle="collapse" data-target="#categories" aria-expanded="false">
                                    <span class="sr-only">Toggle navigation</span>
                                    <i class="fa fa-ellipsis-h font-rem-1-8"></i>
                                </button>
                                <a class="navbar-brand aside-title" href="#">CATEGORIES</a>
                            </div>

                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="categories">
                                <ul class="list-unstyled aside-nav">
                                    <li class="active"><a href="#">All Blog Posts</a></li>
                                    <li><a href="#">Inspiration</a></li>
                                    <li><a href="#">Fashion</a></li>
                                    <li><a href="#">Shopping</a></li>
                                    <li><a href="#">Lifestyle</a></li>
                                    <li><a href="#">Photography</a></li>
                                </ul>
                            </div><!-- /.navbar-collapse -->
                        </div>
                    </nav>
                    <section class="hidden-xs" style="margin-top: 25px;">
                        <div class="aside-section-title">
                            Pick of the week
                        </div>
                        <div class="pick-of-the-week">
                            <div class="thumbnail thumbnail-clean">
                                <img src="./images/ad.png" alt="product image">
                                <div class="caption">
                                    <div class="uppercase text-center">nice to meet you</div>
                                </div>
                            </div>
                            <div class="thumbnail thumbnail-clean">
                                <img src="./images/ad.png" alt="product image">
                                <div class="caption">
                                    <div class="uppercase text-center">nice to meet you</div>
                                </div>
                            </div>
                            <div class="thumbnail thumbnail-clean">
                                <img src="./images/ad.png" alt="product image">
                                <div class="caption">
                                    <div class="uppercase text-center">nice to meet you</div>
                                </div>
                            </div>
                            <div class="thumbnail thumbnail-clean">
                                <img src="./images/ad.png" alt="product image">
                                <div class="caption">
                                    <div class="uppercase text-center">nice to meet you</div>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
                <div class="col-sm-9">
                    <section class="blog" role="contentinfo">
                        <div class="blog-container">
                            <div class="thumbnail thumbnail-clean">
                                <img src="images/blog-1.png" alt="blog cover img">
                                <div class="caption">
                                    <h3 class="thumbnail-title"><a href="MainBlogDetails.html">HELLO NICE TO MEET YOU</a></h3>
                                    <div class="thumbnail-author">
                                        <span class="font-rem-1-6">JAMMIE LANDING<em class="color-pink">&nbsp;&nbsp;|&nbsp;&nbsp;</em></span><span>Posted on December 6,2016 at 4:35 pm</span><span class="author-role">by admin / 0</span>
                                    </div>
                                    <div class="has-hr"></div>
                                </div>
                                <article class="thumbnail-content">
                                    <p>
                                        Jeans are pants made from denim or dungaree cloth. Often the term “jeans” refers to a particular style of pants, called “blue jeans” and invented by Jacob Davis and Levi Strauss in 1873. Starting in the 1950s, jeans, originally designed for cowboys, became popular among teenagers, especially members of the greaser.
                                    </p>
                                    <p>
                                        Jeans come in various fits, including skinny, tapered, slim, straight, boot cut, Narrow bottom, Low waist, anti-fit, and flare.
                                    </p>
                                    <p>
                                        Jeans are now a very popular article of casual dress around the world. They come in many styles and colors; however, blue jeans are particularly identified with American culture, especially the American Old West.
                                    </p>
                                    <p>
                                        The jean brand “Levis” is named after the inventor, Levi Strauss.
                                    </p>

                                    <p>
                                        Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna. Nam eget lorem leo. Aenean ullamcorper, ipsum eget aliquet laoreet, dolor elit elementum libero, at dictum eros urna et ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus ullamcorper vulputate.
                                    </p>

                                    <p>
                                        Suspendisse viverra sodales erat, dictum tristique mauris hendrerit nec. Cras a ultricies eros. Duis nisi dui, tincidunt et tortor sed, pretium vestibulum nisl. Mauris sagittis gravida turpis, non congue mi hendrerit ac. Quisque at ultricies nulla. Nam vitae quam nec leo pharetra dapibus a eget metus. Cras tempor lacinia tempor. Donec elit justo, faucibus sed interdum sed, faucibus eu tortor. Sed molestie libero quis libero sollicitudin, eget pulvinar felis bibendum. Sed a metus diam. Donec eget porta metus. Nunc cursus libero vel nisl placerat gravida. Donec auctor justo non ante adipiscing blandit. Ut at hendrerit nunc, luctus sodales purus. Nunc in neque dapibus, dapibus est placerat, iaculis odio. Cras eleifend massa a ullamcorper convallis.
                                    </p>
                                </article>
                            </div>
                            <div class="share-post">
                                <div class="clearfix">
                                    <span class="fl share-post-title">SHARE POST</span>
                                    <ul class="fr list-inline list-unstyled">
                                        <li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
                                        <li><a href="#" title="google"><i class="fa fa-google-plus"></i></a></li>
                                        <!--<li><a href="#" title="instagram"><i class="fa fa-instagram"></i></a></li>-->
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </section>

                    <section class="section-blog-ad">
                        <div class="blog-container">
                            <div class="row">
                                <div class="col-xs-6 col-sm-4">
                                    <div class="thumbnail thumbnail-clean thumbnail-sm">
                                        <img src="images/blog-tg.png" alt="blog cover img">
                                        <div class="caption">
                                            <div class="thumbnail-author">
                                                JAMMIE
                                            </div>
                                            <h3 class="thumbnail-title"><a href="#">HELLO NICE TO MEET YOU</a></h3>
                                            <div class="thumbnail-date">
                                                <span> May 15, 2017 at 7:35 pm</span>
                                            </div>
                                            <p class="thumbnail-content"><a href="#">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum ...</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-4">
                                    <div class="thumbnail thumbnail-clean thumbnail-sm">
                                        <img src="images/blog-tg.png" alt="blog cover img">
                                        <div class="caption">
                                            <div class="thumbnail-author">
                                                JAMMIE
                                            </div>
                                            <h3 class="thumbnail-title"><a href="#">HELLO NICE TO MEET YOU</a></h3>
                                            <div class="thumbnail-date">
                                                <span> May 15, 2017 at 7:35 pm</span>
                                            </div>
                                            <p class="thumbnail-content"><a href="#">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum ...</a></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-6 col-sm-4">
                                    <div class="thumbnail thumbnail-clean thumbnail-sm">
                                        <img src="images/blog-tg.png" alt="blog cover img">
                                        <div class="caption">
                                            <div class="thumbnail-author">
                                                JAMMIE
                                            </div>
                                            <h3 class="thumbnail-title"><a href="#">HELLO NICE TO MEET YOU</a></h3>
                                            <div class="thumbnail-date">
                                                <span> May 15, 2017 at 7:35 pm</span>
                                            </div>
                                            <p class="thumbnail-content"><a href="#">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum ...</a></p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </section>

                    <section class="section-comment">
                        <div class="blog-container">
                            <div class="section-title-short">ABOUT AUTHOR(3)</div>
                            <ul class="sc-level-1 list-unstyled">
                                <li>
                                    <div class="list-content">
                                        <div class="clearfix">
                                            <h3 class="fl"><span class="sc-list-name">BEN.T</span><small>&nbsp;<span class="color-pink">|</span> august 24, 2014 at 7:35 pm</small> </h3>
                                            <button type="button" class="btn btn-clean fr btn-commenting" title="Leave a message"><i class="fa fa-commenting-o" aria-hidden="true"></i></button>
                                        </div>
                                        <p class="sc-list-content">Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna.</p>
                                    </div>
                                    <ul class="sc-level-2">
                                        <li>
                                            <div class="list-content">
                                                <div class="clearfix">
                                                    <h3 class="fl"><span class="sc-list-name">BEN.T</span><small>&nbsp;<span class="color-pink">|</span> august 24, 2014 at 7:35 pm</small> </h3>
                                                    <button type="button" class="btn btn-clean fr btn-commenting" title="Leave a message"><i class="fa fa-commenting-o" aria-hidden="true"></i></button>
                                                </div>
                                                <p class="sc-list-content">Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna.</p>
                                            </div>
                                            <ul>
                                                <li>
                                                    <div class="list-content">
                                                        <div class="clearfix">
                                                            <h3 class="fl"><span class="sc-list-name">BEN.T</span><small>&nbsp;<span class="color-pink">|</span> august 24, 2014 at 7:35 pm</small> </h3>
                                                            <button type="button" class="btn btn-clean fr btn-commenting" title="Leave a message"><i class="fa fa-commenting-o" aria-hidden="true"></i></button>
                                                        </div>
                                                        <p class="sc-list-content">Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna.</p>
                                                    </div>
                                                    <ul>
                                                        <li>
                                                            <div class="list-content">
                                                                <div class="clearfix">
                                                                    <h3 class="fl"><span class="sc-list-name">BEN.T</span><small>&nbsp;<span class="color-pink">|</span> august 24, 2014 at 7:35 pm</small> </h3>
                                                                    <button type="button" class="btn btn-clean fr btn-commenting" title="Leave a message"><i class="fa fa-commenting-o" aria-hidden="true"></i></button>
                                                                </div>
                                                                <p class="sc-list-content">Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna.</p>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>

                                        </li>
                                        <li>
                                            <div class="list-content">
                                                <div class="clearfix">
                                                    <h3 class="fl"><span class="sc-list-name">BEN.T</span><small>&nbsp;<span class="color-pink">|</span> august 24, 2014 at 7:35 pm</small> </h3>
                                                    <button type="button" class="btn btn-clean fr btn-commenting" title="Leave a message"><i class="fa fa-commenting-o" aria-hidden="true"></i></button>
                                                </div>
                                                <p class="sc-list-content">Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna.</p>
                                            </div>

                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="list-content">
                                        <div class="clearfix">
                                            <h3 class="fl"><span class="sc-list-name">BEN.T</span> <small>&nbsp;<span class="color-pink">|</span> august 24, 2014 at 7:35 pm</small> </h3>
                                            <button type="button" class="btn btn-clean fr btn-commenting" title="Leave a message"><i class="fa fa-commenting-o" aria-hidden="true"></i></button>
                                        </div>
                                        <p class="sc-list-content">Donec tempor adipiscing risus, sit amet consectetur tellus aliquam ac. Fusce dignissim at erat at lacinia. Sed malesuada, velit a tempus congue, turpis erat pellentesque lorem, non semper diam purus quis magna.</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </section>

                    <section class="section-reply">
                        <div class="blog-container">
                            <div class="section-title-short">LEAVE A REPLY</div>
                            <form action="">
                                <fieldset class="row">
                                    <div class="form-group col-xs-12">
                                        <span class="sr-only">comment</span>
                                        <textarea name="comment" class="form-control" rows="10" placeholder="Comment..."></textarea>
                                    </div>
                                    <div class="form-group col-xs-12 col-sm-6">
                                        <span class="sr-only">name</span>
                                        <input type="text" class="form-control" name="name" placeholder="Name">
                                    </div>
                                    <div class="form-group col-xs-12 col-sm-6">
                                        <span class="sr-only">email</span>
                                        <input type="email" class="form-control" placeholder="E-mail" name="email">
                                    </div>

                                    <div class="form-actions col-xs-12">
                                        <button type="submit" class="btn btn-fill-default">POST COMMENT</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </section>

</main>

<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="scripts/reply.js"></script>
<script src="scripts/index.js"></script>
<script>
    // @sourceURL = test.js
    $(function($){
        $.get("template/client-bd-message.html",function(result) {
            var temp = result;
            function commentingFn() {
                new AfterSthByButton({
                    controlEl: this, temp: temp, callbackOnce: function () {
                        var id = ((new Date()).getTime()).toString();
                        var $list_form = $(this).parents(".list-content").next();
                        $list_form.attr("id", "l_" + id);
                        $list_form.find("form").attr("id", "c_" + id);
                        validatorFormEasy({
                            container: document.querySelector("#l_" + id),
                            rules: {
                                comment: {
                                    required: true
                                },
                                name: {
                                    required: true
                                },
                                email: {
                                    required: true,
                                    email: true
                                }
                            },
                            callback: function (params) {
                                console.log(params);

                                //reset
                                validator.resetForm();
                                $("#c_" + id)[0].reset();
                                $list_form.slideUp(160);

                                //new message
                                var message_html = createMessage({
                                    name: params.name,
                                    time: 'August 24, 2017 14:35 pm',
                                    content: params.comment
                                });
                                $list_form.after(message_html);
                                var $newCommenting = $list_form.next().find(".btn-commenting");
                                commentingFn.call($newCommenting);

                            }
                        });
                    }
                });
            }
            $(".btn-commenting").each(commentingFn);
        });
    })
</script>
</body>
</html>